<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>checkbox_radio</title>
    <style type="text/css">
    /*单选范围内所有的name要保持一致*/
    .rdo {
        display: none;
    }
    
    .rdo + label {
        position: relative;
    }
    
    .rdo + label:before {
        content: "";
        position: relative;
        background-color: #fff;
        border: 1px solid #c1caca;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
        padding: 9px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 10px;
        vertical-align: top;
    }
    
    .rdo:checked + label:before {
        background-color: #ecf2f7;
        border: 1px solid #92a1ac;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
    }
    
    .rdo:checked + label:after {
        content: "";
        position: absolute;
        top: 3px;
        left: 6px;
        background: #000;
        padding: 4px;
        border-radius: 50%;
    }
    </style>
</head>

<body>
    <input type="radio" name="radio" id="radiokbox1" class="rdo" checked="checked">
    <label for="radiokbox1">选项1</label>
    <input type="radio" name="radio" id="radiobox2" class="rdo">
    <label for="radiobox2">选项2</label>
</body>

</html>
